<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>逻辑语法</title>
        <link rel="stylesheet" type="text/css" href="../CSS/CSS.css">
        <script>
            //for循环数组的定义
            var list1 = [1,2,3];
            var list2 = [1,2,3,4,5,7,8];
            window.onload = function () {
                //三角形
                var san = function () {
                    for (i = 1; i <= 10; i++) {
                        for (j = 1; j <= i; j++) {
                            document.write('*');
                        }
                        document.write('<br/>');
                    }
                };
                //矩形
                var ju = function () {
                    for (i = 1; i <= 10; i++) {
                        document.write('**********');
                        document.write('<br/>');
                    }
                };
                //菱形
                var ling = function () {
                    for (i = 1; i <= 10; i++) {
                        for (j = 1; j <= i; j++) {
                            document.write('*');
                        }
                        document.write('<br/>');
                    }
                    for (i = 9; i >= 1; i--) {
                        for (j = 1; j <= i; j++) {
                            document.write('*');
                        }
                        document.write('<br/>');
                    }
                };
                //结果
                var jieguo = function () {
                    var num = prompt("请输入您想要的形状，a是三角形，b是矩形，c是菱形");
                    if (num == 'a') {
                        san();
                    } else if (num == 'b') {
                        ju();
                    } else if (num == 'c') {
                        ling();
                    } else {
                        alert("您好，您的输入有误，请重新输入！");
                        jieguo();
                    }
                };
                //if判断语句的点击事件
                document.getElementById('btn1').onclick = function () {
                    jieguo();
                };
                //for循环的点击事件
                document.getElementById('btn2').onclick = function () {

                    var num = 0;
                    for (var i = 0; i < list1.length; i++) {
                        num = num + parseInt(list1[i]);
                    }
                    alert(num);
                };
                document.getElementById('btn3').onclick = function () {
                    for (var i = 0; i < list2.length; i++) {
                        if (0 == i % 2) {
                            alert(i)
                        }
                    }
                };
                //while循环
                document.getElementById('btn4').onclick = function () {
                    var i = 10;
                    while (i > 0) {
                        if (0 == i % 2) {
                            alert(i);
                        }
                        i--;
                    }
                };
                document.getElementById('btn5').onclick = function () {
                    var total = 0;
                    var i = 1;
                    while (i <= 10) {
                        total += i;
                        i++;
                    }
                    alert(total);
                };


                //do while循环
                document.getElementById('btn6').onclick = function () {
                    var total = 0;
                    var i = 1;
                    do {
                        total += i;
                        i++;
                    } while (i <= 10);
                    alert(total);
                };
                document.getElementById('btn7').onclick = function () {
                    var i = 100;
                    do {
                        alert(i);
                        i++
                    }
                    while (i <= 10);
                };
                //switch判断
                document.getElementById('btn8').onclick = function () {

                    var num = prompt("请输入您想要的形状，a是三角形，b是矩形，c是菱形");
                    switch (num) {
                        case 'a':
                            san();
                            break;
                        case 'b':
                            ju();
                            break;
                        case 'c':
                            ling();
                            break;
                        default:
                            alert("您好，您的输入有误，请重新输入！");
                    }

                }
            }

        </script>
    </head>
    <body>
    <fieldset><legend class="f-w">逻辑语法</legend>
        <p class="f-w">关于逻辑语法说明</p>
        <p>逻辑语法一般用于判断条件或者需要满足多个条件的时候，逻辑语法有很多种，</p>
        <p>其中包括<span class="red">if、 else if、 for、 while、 do while、 switch;等</span></p>
        <p>接下来，我们就来一一说明这些逻辑语法的用法</p>
        <hr/>
        <p class="f-w">if、else if </p>
        <p>关于<span class="red">if、if else</span>，这个逻辑语法一般用于判断，当满足if条件时做什么操作，然后当if条件不满足时，用else if进行什么操作，或者满足另一条件做什么操作</p>
        <p>我们可以用一个例子来说明</p>
        <p class="f-w">代码效果</p>
        <button id="btn1">点击查看</button>　　一个关于输入图形判断的例子，当输入什么定义的字母时得到什么样的图形，若条件不满足时进行的操作
        <p class="f-w">代码示例</p>
        <pre>
            window.onload = function () {
              var jieguo = function () {
                var num = prompt("请输入您想要的形状，a是三角形，b是矩形，c是菱形");
                  <span class="red">if</span> (num == 'a') {
                    san();
                } <span class="red">else if</span> (num == 'b') {
                    ju();
                } <span class="red">else if</span> (num == 'c') {
                    ling();
                } <span class="red">else</span> {
                    alert("您好，您的输入有误，请重新输入！");
                    jieguo();
                }
            };

                document.getElementById('btn1').onclick = function () {
                    jieguo();
                }
            };
           }
        </pre>

        <hr/>
        <p class="f-w">switch 　 有关键词 <span class="red">case，break，default</span></p>
        <p>关于<span class="red">switch</span>，这个逻辑语法一般用于判断，跟if条件语句有些相似，用<span class="red">case</span>来执行代码块</p>
        <p>随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。需要使用 <span class="red">break </span>来阻止代码自动地向下一个 case 运行。</p>
        <p>使用 <span class="red">default </span>关键词来规定匹配不存在时做的事情</p>
        <p>我们可以用一个例子来说明</p>
        <p class="f-w">代码效果</p>
        <button id="btn8">点击查看</button>　　一个关于输入图形判断的例子，当输入什么定义的字母时得到什么样的图形，若条件不满足时进行的操作
        <p class="f-w">代码示例</p>
        <pre>
            window.onload = function () {
                  document.getElementById('btn8').onclick = function () {

                    var num = prompt("请输入您想要的形状，a是三角形，b是矩形，c是菱形");
            <span class="red">switch </span>(num) {
                        <span class="red">case</span> 'a':
                            san();
                            <span class="red">break;</span>
                        <span class="red">case </span>'b':
                            ju();
                           <span class="red"> break;</span>
                        <span class="red">case</span> 'c':
                            ling();
                           <span class="red"> break;</span>
                        <span class="red">default:</span>
                            alert("您好，您的输入有误，请重新输入！");
                    }

                }
           }
        </pre>

        <hr/>
        <p class="f-w">for</p>
        <p>关于<span class="red">for</span>，这个逻辑语句一般用于循环中，包括遍历数组，二维数组，也经常在for循环中用到if判断条件满足与否</p>
        <p>我们可以用两个例子来说明</p>
        <p class="f-w">代码效果</p>
        <button id="btn2">效果1</button> 一个数组内部数字相加　<button id="btn3">效果2 带if判断</button> 一个只显示数组里面的偶数
        <p class="f-w">代码示例</p>
        <pre>
            <span class="f-w">效果1：</span>
             var list1 = [1,2,3];
             window.onload = function () {
                document.getElementById('btn2').onclick = function () {

                        var num = 0;
                        <span class="red">for</span>(var i = 0; i < list1.length; i++) {
                            num = num + parseInt(list1[i]);
                        }
                        alert(num);
                    };
            }

            <span class="f-w">效果2：</span>
             var list2 = [1,2,3,4,5,7,8];
             window.onload = function () {
                document.getElementById('btn3').onclick = function () {
                        <span class="red">for</span>(var i = 0;i < list2.length;i++){
                        <span class="red">if</span>(0==i%2){
                            alert(i)
                        }
                    }
                };
            }
        </pre>

        <hr/>
        <p class="f-w">while</p>
        <p>关于<span class="red">while</span>，这个逻辑语法也是一个循环语句，跟for循环的功能相似</p>
        <p>我们可以用一个例子来说明</p>
        <p class="f-w">代码效果</p>
        <button id="btn4">效果1</button> 输出数组内的偶数　<button id="btn5">效果2</button> 1-10之内的数字相加之和
        <p class="f-w">代码示例</p>
        <pre>
            <span class="f-w">效果1：</span>
             window.onload = function () {
                 document.getElementById('btn4').onclick = function () {
                    var i =10;
                    <span class="red">while</span> (i>0){
                        if (0 == i%2){
                            alert(i);
                        }
                        i--;
                    }
                }
            }

            <span class="f-w">效果2：</span>
            window.onload = function () {
                 document.getElementById('btn5').onclick= function () {
                    var total=0;
                    var i=1;
                     <span class="red">while</span>(i<=10){
                        total+=i;
                        i++;
                    }
                    alert(total);
                };
            ｝

        </pre>

        <hr/>
        <p class="f-w">do while</p>
        <p>关于<span class="red">do while</span>，这个逻辑语法也是一个循环语句，跟while功能相似，但是while条件不成立时，语法不会执行，而do while在后面条件不成立时，会先循环一次</p>
        <p>我们可以用一个例子来说明</p>
        <p class="f-w">代码效果</p>
        <button id="btn6">效果1</button> 1-10之内数字的和　<button id="btn7">效果2</button> 当条件不满足时，至少执行一次结果
        <p class="f-w">代码示例</p>
        <pre>
            <span class="f-w">效果1：</span>
             window.onload = function () {
                 document.getElementById('btn6').onclick = function () {
                    var total=0;
                    var i=1;
                    <span class="red">do</span>{
                        total+=i;
                        i++;
                    }<span class="red">while</span>(i<=10);
                    alert(total);
                };
            }

            <span class="f-w">效果2：</span>
            window.onload = function () {
                 document.getElementById('btn7').onclick  = function () {
                    var i =100;
                   <span class="red">do</span>{alert(i);i++}
                   <span class="red">while </span>(i<=10);
                }
            }
        </pre>


    </fieldset>

    </body>
</html>